<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CodeCrafter - Code Generator - Version 1.0 (Beta)</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<script>

// Browser Detect Lite  v2.1.4
// http://www.dithered.com/javascript/browser_detect/index.html
// modified by Chris Nott (chris@NOSPAMdithered.com - remove NOSPAM)


function BrowserDetectLite() {
   var ua = navigator.userAgent.toLowerCase();

   // browser name
   this.isGecko     = (ua.indexOf('gecko') != -1 && ua.indexOf('safari') == -1);
   this.isMozilla   = (this.isGecko && ua.indexOf('gecko/') + 14 == ua.length);
   this.isNS        = ( (this.isGecko) ? (ua.indexOf('netscape') != -1) : ( (ua.indexOf('mozilla') != -1) && (ua.indexOf('spoofer') == -1) && (ua.indexOf('compatible') == -1) && (ua.indexOf('opera') == -1) && (ua.indexOf('webtv') == -1) && (ua.indexOf('hotjava') == -1) ) );
   this.isIE        = ( (ua.indexOf('msie') != -1) && (ua.indexOf('opera') == -1) && (ua.indexOf('webtv') == -1) );
   this.isSafari    = (ua.indexOf('safari') != - 1);
   this.isOpera     = (ua.indexOf('opera') != -1);
   this.isKonqueror = (ua.indexOf('konqueror') != -1 && !this.isSafari);
   this.isIcab      = (ua.indexOf('icab') != -1);
   this.isAol       = (ua.indexOf('aol') != -1);

   // spoofing and compatible browsers
   this.isIECompatible = ( (ua.indexOf('msie') != -1) && !this.isIE);
   this.isNSCompatible = ( (ua.indexOf('mozilla') != -1) && !this.isNS && !this.isMozilla);

   // browser version
   this.versionMinor = parseFloat(navigator.appVersion);

   // correct version number
   if (this.isNS && this.isGecko) {
      this.versionMinor = parseFloat( ua.substring( ua.lastIndexOf('/') + 1 ) );
   }
   else if (this.isIE && this.versionMinor >= 4) {
      this.versionMinor = parseFloat( ua.substring( ua.indexOf('msie ') + 5 ) );
   }
   else if (this.isMozilla) {
      this.versionMinor = parseFloat( ua.substring( ua.indexOf('rv:') + 3 ) );
   }
   else if (this.isSafari) {
      this.versionMinor = parseFloat( ua.substring( ua.lastIndexOf('/') + 1 ) );
   }
   else if (this.isOpera) {
      if (ua.indexOf('opera/') != -1) {
         this.versionMinor = parseFloat( ua.substring( ua.indexOf('opera/') + 6 ) );
      }
      else {
         this.versionMinor = parseFloat( ua.substring( ua.indexOf('opera ') + 6 ) );
      }
   }
   else if (this.isKonqueror) {
      this.versionMinor = parseFloat( ua.substring( ua.indexOf('konqueror/') + 10 ) );
   }
   else if (this.isIcab) {
      if (ua.indexOf('icab/') != -1) {
         this.versionMinor = parseFloat( ua.substring( ua.indexOf('icab/') + 6 ) );
      }
      else {
         this.versionMinor = parseFloat( ua.substring( ua.indexOf('icab ') + 6 ) );
      }
   }

   this.versionMajor = parseInt(this.versionMinor);
   this.geckoVersion = ( (this.isGecko) ? ua.substring( (ua.lastIndexOf('gecko/') + 6), (ua.lastIndexOf('gecko/') + 14) ) : -1 );
   //  GECKO REVISION
   this.geckoRevision = -1;
   if (this.isGecko) {
      temp = ua.split("rv:");
      this.geckoRevision = parseFloat(temp[1]);
   }

   // dom support
   this.isDOM1 = (document.getElementById);
   this.isDOM2Event = (document.addEventListener && document.removeEventListener);

   // css compatibility mode
   this.mode = document.compatMode ? document.compatMode : 'BackCompat';

   // platform
   this.isWin   = (ua.indexOf('win') != -1);
   this.isWin32 = (this.isWin && ( ua.indexOf('95') != -1 || ua.indexOf('98') != -1 || ua.indexOf('nt') != -1 || ua.indexOf('win32') != -1 || ua.indexOf('32bit') != -1 || ua.indexOf('xp') != -1) );
   this.isMac   = (ua.indexOf('mac') != -1);
   this.isUnix  = (ua.indexOf('unix') != -1 || ua.indexOf('sunos') != -1 || ua.indexOf('bsd') != -1 || ua.indexOf('x11') != -1)
   this.isLinux = (ua.indexOf('linux') != -1);

   // specific browser shortcuts
   this.isNS4x = (this.isNS && this.versionMajor == 4);
   this.isNS40x = (this.isNS4x && this.versionMinor < 4.5);
   this.isNS47x = (this.isNS4x && this.versionMinor >= 4.7);
   this.isNS4up = (this.isNS && this.versionMinor >= 4);
   this.isNS6x = (this.isNS && this.versionMajor == 6);
   this.isNS6up = (this.isNS && this.versionMajor >= 6);
   this.isNS7x = (this.isNS && this.versionMajor == 7);
   this.isNS7up = (this.isNS && this.versionMajor >= 7);

   this.isIE4x = (this.isIE && this.versionMajor == 4);
   this.isIE4up = (this.isIE && this.versionMajor >= 4);
   this.isIE5x = (this.isIE && this.versionMajor == 5);
   this.isIE55 = (this.isIE && this.versionMinor == 5.5);
   this.isIE55up = (this.isIE && this.versionMinor >= 5.5);
   this.isIE5up = (this.isIE && this.versionMajor >= 5);
   this.isIE6x = (this.isIE && this.versionMajor == 6);
   this.isIE6up = (this.isIE && this.versionMajor >= 6);

   this.isIE4xMac = (this.isIE4x && this.isMac);
}
var browser = new BrowserDetectLite();


/*
 * Danne Lundqvist
 * http://www.dotvoid.com
 *
 * May 19, 2004, Danne Lundqvist
 * Verson 1.0 - Inital version
 *
 * June 23, 2004
 * Version 1.1 - Functions for Post-Drawing Manipulation
 */

function TabFocus(event)
{
   if (!event) event = window.event;
   evtTarget = (browser.isIE5up) ? event.srcElement : event.target;
   evtTarget.tab.group.focus(evtTarget.tab.id);

   return false;
}

function Tab(group, id, title)
{
   this.id      = id;
   this.tid     = id + '_tab';
   this.group   = group;

   var tab = document.createElement('div');
   var a   = document.createElement('a');

   if (browser.isIE5up)
   {
      a.attachEvent("onclick", TabFocus);
   }
   else
   {
      a.addEventListener("click", TabFocus, false);
   }
   a.tab = this;
   a.href = '#';
   a.innerHTML = title;

   tab.id = this.tid;
   tab.className = 'TabStyleTabNormal';
   tab.appendChild(a);

   group.tablist.appendChild(tab);

   return this;
}


function TabGroupTabFocus(id)
{
   var toId = id;
   var fromId = this.aid;

   if (fromId)
   {
      var e = document.getElementById(fromId);
      if (e) e.style.display = 'none';
   }
   if (toId)
   {
      var e = document.getElementById(toId);
      if (e) e.style.display = 'block';
   }

   if (!id)
      id = this.aid;
   else
      this.aid = id;

   for (n = 0; n < this.length(); n++)
   {
      var t = document.getElementById(this.tabs[n].tid);
      if (this.tabs[n].id == id)
      {
         t.className = 'TabStyleTabActive';
         this.onTabFocusGained(this.tabs[n].id);
      }
      else if (t.className == "TabStyleTabActive")
      {
         t.className = 'TabStyleTabNormal';
         this.onTabFocusLost(this.tabs[n].id);
      }
   }
}




function TabGroupLength()
{
   return this.tabs.length;
}

function TabGroupAdd(id, title)
{
   this.tabs[this.tabs.length] = new Tab(this, id, title, this.tabs.length + 1);
}

function TabGroupRemove(id)
{
   if (this.tabs.length==1) { this.tabs=new Array(); return; }
   var newTabs = new Array(this.tabs.length - 1);
   var m = 0;
   for (n = 0; n < this.tabs.length; n++)
   {
      if (this.tabs[n].id != id)
         newTabs[m++] = this.tabs[n];
   }
   this.tabs = newTabs;
}


function TabGroupDraw()
{
   if (!this.id)
      return;

   this.content.innerHTML = '';
   for (n = 0; n < this.length(); n++)
   {
      var t = document.getElementById(this.tabs[n].id);
      var p = t.parentNode;
      if (p) t = p.removeChild(t);
      this.content.appendChild(t);
   }
}


/**************************************************************
 *  Extension Functions for Post-Drawing Manipulation
 ***************************************************************/

function TabGroupTabSetForeground(id,c){
   var t=document.getElementById(id+"_tab");
   if (t){
      var links=t.getElementsByTagName("a");
      if(links&&links.length>0){
         links[0].style.color=c
      }
   }
}


function TabGroupTabSetTitle(id,title){
   var t=document.getElementById(id+"_tab");
   if (t){
      var links=t.getElementsByTagName("a");
      if(links&&links.length>0){
         links[0].innerHTML=title;
      }
   }
}

function TabGroupRemoveEx(id){
   if (! document.getElementById(id)) return;
   this.remove(id);
   var e = document.getElementById(id);
   if (e){
      e.style.display='none';
      if (e.parentNode) e.parentNode.removeChild(e);
   }
   e = document.getElementById(id+"_tab");
   if (e){
      e.style.display='none';
      if (e.parentNode) e.parentNode.removeChild(e);
   }

   if (this.aid==id && this.length()>0){
      this.focus(this.tabs[0].id);
   }
}


function TabGroupAddEx(id, title){
   var t = document.getElementById(id);
   if (! t){
      t=document.createElement('div');
      t.innerHTML="";
      t.style.display='none';
      t.id=id;
   }

   this.add(id,title);
   if (t){
      var p = t.parentNode;
      if (p) t = p.removeChild(t);
      this.content.appendChild(t);
   }
}

/**************************************************************
 * END: Dov Katz Function Extensions
 **************************************************************/

function TabGroup(id)
{
   this.id = id;
   this.tabs = new Array();
   this.aid = '';

   this.add    = TabGroupAdd;
   this.remove = TabGroupRemove;
   this.length = TabGroupLength;
   this.focus  = TabGroupTabFocus;
   this.draw   = TabGroupDraw;

   this.removeEx = TabGroupRemoveEx;
   this.addEx = TabGroupAddEx;
   this.setTitle=TabGroupTabSetTitle;
   this.onTabFocusGained=function(id){this.setTabForeground(id,'black');};
   this.onTabFocusLost=function(id){this.setTabForeground(id,'black');};

   // Not sure this should exist. Should really be in the css!!!
   this.setTabForeground=TabGroupTabSetForeground;

   this.content = document.createElement('div');
   this.content.className = 'TabStyleContent';
   this.content.appendChild(document.createTextNode('Init...'));

   this.tablist = document.createElement('div');
   this.tablist.className = 'TabStyleTabList';

   e = document.getElementById(id);
   e.appendChild(this.tablist);
   e.appendChild(this.content);

   return this;
}
</script>

<style type="text/css">
html,body{margin:0;padding:0}
body{font: 100% arial,sans-serif; background-color: #F0F2E6;}
p{margin:0 10px 10px}
/* a{display:block;color: #981793;padding:2px} */
div#header h4{
   height:20px;
   line-height:20px;
   margin:0;
   padding-left:10px;
   background: #EEE;color: #79B30B
}

div#content p{
   line-height:1.4;
   background-color:#F0F2E6
}

div#extra{background:#F0F2E6}
div#footer{background: #333;color: #FFF}
div#footer p{margin:0;padding:5px 10px}

div#wrapper{float:right;width:100%;margin-left:-310px}
div#content{margin-left:310px; padding:4px;}
div#dblist{margin-left:310px; padding:4px;width:380px;}
/*div#tablelist{margin-left:260px; padding:4px;width:380px;}*/
div#tablelist{float:right;margin-left:310px; margin-top:-233px; padding:4px;}
div#fielddefs{float:right;margin-left:310px; /*margin-top:-233px;*/ padding:4px;}

/*div#navigation{}*/
div#navigation{float:left;padding:4px;width:300px;font-size: 90%;height:340px;background:#F0F2E6;}

div#extra{float:left;padding:4px;clear:left;width:300px}
div#footer{clear:both;width:100%}

/*
////////////////////////////////////////////////////////////////////
// LOCAL STUFF
////////////////////////////////////////////////////////////////////
*/
div#container{
font-size: 90%;height:100%;
background:#F0F2E6;
}

label {
  margin: 3px 0;
  font-size: 90%;
  width:30%;
  font-weight: bolder;
/*  display: block;*/
  float: left;
  text-align: left;
}

/*label.checkbox, label.yes_no {
  display: inline;
  position: relative;
  top: -2px;
}*/

* html /*label.checkbox,*/ * html /*label.yes_no */{
  top: 1px;
}

/*label.yes_no {
  font-weight: normal;
}

label span.label_required {
  color: red;
}*/

input, textarea, select {
  border: 1px solid #ccc;
  padding: 3px;
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 11px;
  background: white;
}

select {
  padding: 1px;
}

input:hover, textarea:hover, select:hover {
  border: 1px solid green;
}

input:focus, textarea:focus, select:focus {
  border: 1px solid black;
}

fieldset {
  margin: 10px 0;
  padding: 10px;
  padding-top: 5px;
  border: 1px solid #ccc;
}

fieldset legend {
  font-size: 90%;
  font-weight: bolder;
}

/* input { width: 200px; }
input.short { width: 50px; }
input.medium { width: 150px; }
input.long { width: 400px; }
input.title { width: 530px; }

*/

input.checkbox, input.yes_no {
  border: 0;
  width: auto;
  background: transparent;
}

/*legend label.checkbox {
  font-weight: bolder;
}*/

textarea, textarea.long {
  width: 400px;
  height: 150px;
}

textarea.short {
  width: 400px;
  height: 70px;
}

textarea.comment {
  width: 488px;
  height: 150px;
}

textarea.editor {
  width: 530px;
  height: 300px;
}

button.submit {
  margin-top: 10px;
}

#crumbsWrapper {
  clear: both;
  background: #444;
  color: white;
  margin: 0 auto;
  float: left;
  width: 100%;
}

.hint {
  border-color: #E9BE31;
  background-color: #FFFFCC;
  margin: 10px 0;
  border: 2px solid #ccc;
  padding: 5px 10px;
  font-size: 90%;
}

.dialogheader {
  font-size: 16px;
  color: #BA0101;
}

/* Standard table 'spreadsheet' style . From dotproject*/

table.tbl {
   background: #a5cbf7;
}

table.tbl TH {
   background-color: #08245b;
   color: #ffffff;
   list-style-type: disc;
   list-style-position: inside;
   border: outset #D1D1CD 1px;
   font-weight: bold;
   text-align:center;
   font-size: 12px;
}

table.tbl td {
   background-color: #ffffff;
   font-size: 11px;
}

A.hdr:link, A.hdr:active, A.hdr:visited  {
   color: #ffffff;
   font-weight: bold;

}

.redbutton {
background: #900;
color: #fff;
font-family: Arial, Helvetica, Sans-Serif; font-weight: bold; font-size: 10px;
margin: 0px;
border-top: 1px solid #9CF;
border-right: 1px solid #69C;
border-bottom: 1px solid #69C;
border-left: 1px solid #9CF;
height:20px;
}

.titlepanel {
   font-variant: small-caps;
   margin: 0px;
   width: 96%;
   height: 18px;
   overflow: hidden;
   background-repeat: no-repeat;
   padding-left:29px;
   padding-bottom:1px;
   color: yellow;
   background-color:#5E9201;
   border-style:solid;
   border-width:1px;
   border-top-color:#ADC97B;
   border-left-color:#ADC97B;
   border-bottom-color:#396101;
   border-right-color:#396101;
}

.panel {
   padding-top: 5px;
   border-style:solid;
   border-width:1px;
   border-top-color:#999999;
   border-left-color:#999999;
   border-bottom-color:#CCCCCC;
   border-right-color:#CCCCCC;
   width: 100%;
/*    height: 85%; */
   overflow: scroll;
   overflow-x: hidden;
   overflow-y: auto;
   background-color: white;
   margin-bottom: 0px;
   padding-bottom: 0px;
}

.smallGreenButton,
input.action {
   text-align: center;
   color: yellow;
/*    font-size:13px; */
   font-weight: bold;
  height:16px;
   margin: 0px;
/*   padding-top:1px;
   padding-left: 2px;
   padding-right: 2px;
   padding-bottom:1px;*/
   background-color:#5E9201;
   border-style:solid;
   border-width:1px;
/*   border-top-color:#ADC97B;
   border-left-color:#ADC97B;
   border-bottom-color:#396101;
   border-right-color:#396101;*/

   font-size:11px;
/*   height:5px;*/
   padding-top:0px;
   padding-bottom:1px;
}


a.bluebutton {
   border-width:1px;
   border-color:#aaa black black #aaa;
   border-style:solid;
   text-decoration:none;
/*    font-weight:bold; */
   padding:0 3px 0 3px;
   background-color:#c2ddf4;
   float:right;
}
a.bluebuttonbutton:hover {
   text-decoration:none;
}

tr.alternate {
   background-color:#ffffcc;
}

/*
 * Danne Lundqvist
 * http://www.dotvoid.com
 */
/*
 * Danne Lundqvist
 * http://www.dotvoid.com
 *
 * More information see the README file
 */

div.TabStyleTabList
{
margin: 0px;
padding: 0px;
}

div.TabStyleTabActive
{
display: inline;
height: 20px;
border: 1px solid #999;
border-bottom: 1px solid #fff;
background-color: #fff;
margin-left: 5px;
padding: 3px;
font-size: 10px;
font-family: sans-serif;
}

.TabStyleTabActive a {
display: normal;
text-decoration: none;
color: #00f;
cursor: default;
}

div.TabStyleTabNormal
{
display: inline;
height: 20px;
border: 1px solid #ccc;
border-bottom: 1px solid #ccc;
background-color: #eee;
margin-left: 5px;
padding: 3px;
font-size: 10px;
font-family: sans-serif;
}

div.TabStyleTabNormal a {
display: normal;
color: #00f;
text-decoration: none;
}

div.TabStyleTabNormal a:visited {
display: normal;
color: #00f;
text-decoration: none;
}

div.TabStyleTabNormal a:hover {
text-decoration: underline;
}

div.TabStyleContainer
{
margin: 0px;
padding: 0px;
}

div.TabStyleContent
{
padding: 4px;
margin: 0px;
margin-top: 3px !important;
margin-top: -1px;
border: 1px solid #ccc;
}



</style>
<script type="text/javascript" src="http://localhost/surveycrafter/js/prototype.js"></script>
<!--
<link rel="stylesheet" href="http://localhost/surveycrafter/libs/dhtml_calendar/dhtmlgoodies_calendar.css" media="screen"></link>
<script type="text/javascript" src="http://localhost/surveycrafter/libs/dhtml_calendar/dhtmlgoodies_calendar.js"></script>
-->

<SCRIPT>

function toggleVis(obj){
         with(document.getElementById(obj).style){
                 if(display != 'none'){
                         display = 'none';
                 }else{
                         display = '';
                 }
         }
}

function ProcessFieldType( fieldname ) {

   var fieldtype = $('field_type_'+fieldname).options[$('field_type_'+fieldname).selectedIndex].value;
   if (fieldtype == 'dontuse') {
      // Hide the other fields
      $('size_'+fieldname).style.display = 'none';
      $('optionlist_'+fieldname).style.display = 'none';
      $('label_'+fieldname).style.display = 'none';
      $('relations_'+fieldname).style.display = 'none';
   }
   else if (fieldtype == 'readonly') {
      // Hide the other fields
      $('size_'+fieldname).style.display = 'none';
      $('optionlist_'+fieldname).style.display = 'none';
      $('label_'+fieldname).style.display = 'block';
      $('relations_'+fieldname).style.display = 'block';
   }
   else if ( (fieldtype == 'password') || (fieldtype == 'text')) {
      // Hide the other fields
      $('size_'+fieldname).style.display = 'block';
      $('optionlist_'+fieldname).style.display = 'none';
      $('label_'+fieldname).style.display = 'block';
      $('relations_'+fieldname).style.display = 'block';
   }
   else if ( (fieldtype == 'checkbox') || (fieldtype == 'combobox') || (fieldtype == 'multiplelist') ) {
      // Hide the other fields
      $('size_'+fieldname).style.display = 'none';
      $('optionlist_'+fieldname).style.display = 'block';
      $('label_'+fieldname).style.display = 'block';
      $('relations_'+fieldname).style.display = 'block';
   }
   else if ( fieldtype == 'radiobutton' ) {
      // Hide the other fields
      $('size_'+fieldname).style.display = 'none';
      $('optionlist_'+fieldname).style.display = 'block';
      $('label_'+fieldname).style.display = 'block';
      $('relations_'+fieldname).style.display = 'block';
   }
   else if ( fieldtype == 'textarea' ) {
      // Hide the other fields
      $('size_'+fieldname).style.display = 'block';
      $('optionlist_'+fieldname).style.display = 'none';
      $('label_'+fieldname).style.display = 'block';
      $('relations_'+fieldname).style.display = 'block';
   }

}

// function ToggleAdvancedDetails( form ) {
//
//    var adv_option = form.flag_advanced.checked;
//
//    if ( adv_option == false ) {
//       try {
//                document.getElementById('advanced_options').style.display = "none";
//       }
//       catch (e) {
//          ;
//       }
//    }
//    else {
//       try {
//                document.getElementById('advanced_options').style.display = "block";
//       }
//       catch (e) {
//          ;
//       }
//    }
//
// }

// ShowMore(\"more_{$field->Field}\")
// function ShowMore( container ) {
//
// //    var adv_option = form.flag_advanced.checked;
//    var display_status = $(container).style.display;
//
//    if ( display_status == 'block' ) {
//       try {
//                $(container).style.display = "none";
//       }
//       catch (e) {
//          ;
//       }
//    }
//    else {
//       try {
//                $(container).style.display = "block";
//       }
//       catch (e) {
//          ;
//       }
//    }
//
// }

function FieldNameDropDown(tablefield, fieldlist, displaylist) {

   // get the database values from the form.

   var db_host     = document.getElementById('d_host').value;
   var db_user     = document.getElementById('d_user').value;
   var db_userpass = document.getElementById('d_userpass').value;
   var db_name     = document.getElementById('d_name').value;

   var parms='dummy=nothing';
   parms += ((db_name     == undefined) ? '' : '&d_name='+db_name);
   parms += ((db_user     == undefined) ? '' : '&d_user='+db_user);
   parms += ((db_userpass == undefined) ? '' : '&d_userpass='+db_userpass);
   parms += ((db_host     == undefined) ? '' : '&d_host='+db_host);


   var table = $(tablefield).options[$(tablefield).selectedIndex].value;

   parms += ((table        == undefined) ? '' : '&d_table='+table);
   parms += ((fieldlist    == undefined) ? '' : '&fieldlist_field='+fieldlist);
   parms += ((displaylist  == undefined) ? '' : '&displaylist_field='+displaylist);

   var url = '<?= site_url('codecrafter/fieldlistdropdown/'); ?>';
   var target = 'fieldnames';
   var myAjax = new Ajax.Updater(target, url, {method: 'post', parameters: parms, onComplete: updateFields});

   return false;


}

function updateFields() {

var fieldresponse = $('fieldnames').innerHTML;
var fieldar = fieldresponse.split("|");
var lookup_field  = fieldar[0];
var display_field = fieldar[1];
// alert(fieldresponse);
// alert(fieldar[0]);
    $(lookup_field).length = 1;
    $(lookup_field).length = fieldar.length-1;
    for (o=2; o < fieldar.length; o++)
    {
      $(lookup_field)[o-1].text = fieldar[o];
    }

    $(display_field).length = 1;
    $(display_field).length = fieldar.length-1;
    for (o=2; o < fieldar.length; o++)
    {
      $(display_field)[o-1].text = fieldar[o];
    }

}


function ShowLookup( container ) {

//    var adv_option = form.flag_advanced.checked;
   var display_status = $(container).style.display;

   if ( display_status == 'block' ) {
      try {
               $(container).style.display = "none";
      }
      catch (e) {
         ;
      }
   }
   else {
      try {
               $(container).style.display = "block";
      }
      catch (e) {
         ;
      }
   }

}


function select_table(db_name, db_table) {

   // Populate the form on behalf of the user;
   document.getElementById('d_name').value = db_name;
   document.getElementById('d_table').value = db_table;

   // Get the other database values from the form
   var db_host    = document.getElementById('d_host').value;
   var db_user     = document.getElementById('d_user').value;
   var db_userpass = document.getElementById('d_userpass').value;

   var parms='dummy=nothing';
   parms += ((db_name     == undefined) ? '' : '&d_name='+db_name);
   parms += ((db_user     == undefined) ? '' : '&d_user='+db_user);
   parms += ((db_userpass == undefined) ? '' : '&d_userpass='+db_userpass);
   parms += ((db_host     == undefined) ? '' : '&d_host='+db_host);
   parms += ((db_table    == undefined) ? '' : '&d_table='+db_table);

var url = '<?= site_url('codecrafter/fetchtabledef/'); ?>';

var target = 'tabledefs';
var myAjax = new Ajax.Updater(target, url, {method: 'post', parameters: parms, onComplete: showTablePanel});

}

function select_db(db_name) {

   // Populate the form on behalf of the user;
   document.getElementById('d_name').value = db_name;
//    document.getElementById('d_table').value = db_table;

   // Get the other database values from the form
   var db_host    = document.getElementById('d_host').value;
   var db_user     = document.getElementById('d_user').value;
   var db_userpass = document.getElementById('d_userpass').value;

   var parms='dummy=nothing';
   parms += ((db_name     == undefined) ? '' : '&d_name='+db_name);
   parms += ((db_user     == undefined) ? '' : '&d_user='+db_user);
   parms += ((db_userpass == undefined) ? '' : '&d_userpass='+db_userpass);
   parms += ((db_host     == undefined) ? '' : '&d_host='+db_host);
//    parms += ((db_table    == undefined) ? '' : '&d_table='+db_table);

var url = '<?= site_url('codecrafter/fetchtablelist/'); ?>';

var target = 'tablevalues';
var myAjax = new Ajax.Updater(target, url, {method: 'post', parameters: parms, onComplete: showTableListing});

}




</SCRIPT>

<script type="text/javascript" langage="javascript" src="<?= base_url().'assets/prototype.js'; ?>" ></script>

<script type="text/javascript" langage="javascript">


// function ProgressFunction(msg,leng)
// {
//    if(leng) window.status=leng;
//
// }
//
// function ErrFunction(msg,code)
// {
//    alert(code+'\r\n'+msg);
// }

function FetchDBValues() {


   // get the database values from the form.

   var db_host    = document.getElementById('d_host').value;
   var db_user     = document.getElementById('d_user').value;
   var db_userpass = document.getElementById('d_userpass').value;
   var db_name     = document.getElementById('d_name').value;

   var parms='dummy=nothing';
   parms += ((db_name     == undefined) ? '' : '&d_name='+db_name);
   parms += ((db_user     == undefined) ? '' : '&d_user='+db_user);
   parms += ((db_userpass == undefined) ? '' : '&d_userpass='+db_userpass);
   parms += ((db_host     == undefined) ? '' : '&d_host='+db_host);

   var url = '<?= site_url('codecrafter/fetchdbs/'); ?>';
   var target = 'dbvalues';
   var myAjax = new Ajax.Updater(target, url, {method: 'post', parameters: parms, onComplete: showDBPanel});

   return false;

}

var old_dbvalues_border    = '';
var old_tablevalues_border = '';
var old_tabledefs_border = '';

try {
   old_dbvalues_border = document.getElementById('dbvalues').style.border;
   old_tabledefs_border = document.getElementById('tabledefs').style.border;
   old_tablevalues_border = document.getElementById('tablevalues').style.border;
}
catch (e) {
   ;
}


function showDBPanel() {
   document.getElementById('dbvalues').style.display = 'block';
//    old_dbvalues_border = document.getElementById('dbvalues').style.border;
   document.getElementById('dbvalues').style.border = '2px solid red';
}

function showTablePanel() {
   document.getElementById('tabledefs').style.display = 'block';
//    old_tabledefs_border = document.getElementById('tabledefs').style.border;

   document.getElementById('tablevalues').style.border = old_tablevalues_border;

   document.getElementById('tabledefs').style.border = '2px solid red';

}

function showTableListing() {
   document.getElementById('tablevalues').style.display = 'block';
   document.getElementById('dbvalues').style.border = old_dbvalues_border;
   document.getElementById('tabledefs').style.border = old_tabledefs_border;

//    old_tablevalues_border = document.getElementById('tablevalues').style.border;

   document.getElementById('tablevalues').style.border = '2px solid red';
}

</SCRIPT>


</head>
<body>
<form NAME='ccoptions' method="post" action="<?= site_url('codecrafter/generate/');?>">
   <div id="container">


      <div id="header">
         <div class="titlepanel">CodeCrafter Version 1.0 (BETA)</div>
          <div id="crumbsWrapper"></div>
      </div>


      <div id="wrapper">
         <div id="dblist">
            Database List:
            <div class="panel" style='height:200px;width:340px;' id='dbvalues'>
               To get the database listing

               <ul>
                  <li>Enter the database network address.</li>
                  <li>Enter the database user.</li>
                  <li>Enter the database password.</li>
                  <li>Click the "Connect" button.</li>
               </ul>
            </div>
         </div>
         <div id="tablelist">
            Table Listing:
            <div class="panel" style='height:200px;width:340px;' id='tablevalues'>
               To get the table listing:<br/>
               <ul>
                  <li>Connect to your database.</li>
                  <li>Select your database.</li>
               </ul>
            </div>
         </div>
         <div id="fielddefs">
            Field Definitions:
            <div class="panel" style='height:200px;width:700px;' id='tabledefs'>
               We can customise each field of your generated code.<br />

               <ul>
                  <li>Connect to your database server.</li>
                  <li>Select your database</li>
                  <li>Select your database table</li>
                  <li>Se;ect your field</li>
                  <li>Customise your field.</li>
               </ul>
            </div>
         </div>

      </div>

<!-- START NAVIGATION -->

      <div id="navigation">
         Options:
         <div class="panel" style='height:300px;'>
            <div id="mytab1" style="display:none;">
               <table class="forum" cellpadding="2" cellspacing="3" width="250">
                  <tr>
                     <th colspan="2">Database Options<BR></th>
                  </tr>
                  <tr>
                     <td width='30%'>Server</td>
                     <td><input id="d_host" name="d_host" class="text" value="<?= $db_host; ?>" type="text">
                  </td></tr>
                  <tr>
                     <td>Database user</td>
                     <td><input id="d_user" name="d_user" class="text" value="<?= $db_user; ?>" type="text">
                  </td></tr>
                  <tr>
                     <td>Database password</td>
                     <td><input id="d_userpass" name="d_userpass" class="text" value="<?= $db_password; ?>" type="password">
                     <div align='left'>
                     <input name="connect" value="connect" type="submit" class='smallGreenButton' onClick="javascript:FetchDBValues();return false;">
                     </div>

                  </td></tr>
                  <tr>
                     <td width='30%'>Database name</td>
                     <td><input id="d_name" name="d_name" class="text" value="" type="text">
                  </td></tr>
                  <tr>
                     <td width='30%'>Table
                     </td>
                     <td>
                        <input id="d_table" name="d_table" class="text" value="" type="text">
<!--
                        OR<BR>
                        <input id="fetch_tables" name="fetch_tables" value="Fetch tables for me" type="submit" onClick="javascript:FetchDBValues();return false;">
-->
                     </td>
                  </tr>

               </table>
            </div>
            <div id="mytab2" style="display:none;">

               <table cellpadding="2" cellspacing="5" width="250">
                  <tbody>
                  <tr>
                     <td colspan="2" style="margin: 0pt; padding: 0pt; background-color: rgb(221, 221, 187);"><p style="font-size: 1px;">&nbsp;</p></td>
                  </tr>
                  <tr>
                     <th colspan="2">Code Generation Options<BR></th>
                  </tr>

<!--                  <tr width='30%'>
                     <td>Database table<BR>
                     </td>
                     <td align='center'>
                        <input id="d_table" name="d_table" class="text" value="" type="text"><BR>
                        OR<BR>
                        <input id="fetch_tables" name="fetch_tables" value="Fetch tables for me" type="submit" onClick="javascript:FetchDBValues();return false;">
                     </td>
                  </tr>-->
                  <tr>
                     <td width='30%'>Overwrite Protection</td>
                     <td><input name="flag_clobber" class="text" value="clobber" type="checkbox">&nbsp;Overwrite Directory Structure</td>
                  </tr>
                  <tr>
                     <td>Output To:</td>
                     <td>
                        <input name="target_disk" class="text" value="write_to_disk" type="checkbox" checked='checked'>&nbsp;Disk&nbsp;&nbsp;&nbsp;
                        <input name="target_screen" class="text" value="write_to_screen" type="checkbox">&nbsp;Screen
                     </td>
                  </tr>
                  <tr>
                     <td>Code For:</td>
                     <td>
                        <input name="build_controller" class="text" value="build_controller" type="checkbox" checked='checked'>&nbsp;Controller&nbsp;
                        <input name="build_model" class="text" value="build_model" type="checkbox" checked='checked'>&nbsp;Model&nbsp;
                        <input name="build_view" class="text" value="build_view" type="checkbox" checked='checked'>&nbsp;View&nbsp;
                     </td>
                  </tr>
                  <tr>
                     <td>Navigation:</td>
                     <td><input name="build_navigator" class="text" value="build_navigator" type="checkbox" checked='checked'>&nbsp;Create Navigator&nbsp;&nbsp;&nbsp;
                     </td>
                  </tr>

                  <tr>
                     <td colspan="2" style="margin: 0pt; padding: 0pt; background-color: rgb(221, 221, 187);"><p style="font-size: 1px;">&nbsp;</p></td>
                  </tr>
               </tbody></table>

            </div>

            <div id="mytab3" style="display:none;">
               <table cellpadding="2" cellspacing="5" width="250">
                  <tbody>
                  <tr>
                     <td colspan="2" style="margin: 0pt; padding: 0pt; background-color: rgb(221, 221, 187);"><p style="font-size: 1px;">&nbsp;</p></td>
                  </tr>
                  <tr>
                     <th colspan="2">Code Generation<BR></th>
                  </tr>
                  <tr>
                     <td width='30%'>ActiveRecord</td>
                     <td>
                        <input name="flag_activerecord" class="text" value="activerecord" type="radio">&nbsp;CI AR
                        &nbsp;&nbsp;&nbsp;&nbsp;<br>
                        <input name="flag_activerecord" class="text" value="transitional_activerecord" type="radio">
                        &nbsp;Transition MyAR
                        &nbsp;&nbsp;&nbsp;&nbsp;<br>
                        <input name="flag_activerecord" class="text" value="myactiverecord" type="radio">
                        &nbsp;MyAR (Not yet)<br>

                     </td>
                  </tr>
<!--                  <tr>
                     <td width='30%'>Use Transitional ActiveRecord</td>
                     <td><input name="flag_activerecord" class="text" value="transitional_activerecord" type="radio">&nbsp;</td>
                  </tr>-->
                  <tr>
                     <td>Verbose Mode:</td>
                     <td><input name="verbose_mode" class="text" value="verbose" type="checkbox" checked='checked'>&nbsp;
                        </td>
                  </tr>
<!--
                  <tr>
                     <td>Model Field Pesistence:</td>
                     <td><input name="persistence_mode" class="text" value="persistence_mode" type="checkbox" >&nbsp;
                        </td>
                  </tr>
-->
                  <tr>
                     <td>Security Settings:</td>
                     <td>XSS Filter: <input name="xss_filter_mode" class="text" value="xss_filter_mode" type="checkbox" checked='checked'>&nbsp;
                        </td>
                  </tr>

                  <tr>
                     <td>Pagination:</td>
                     <td>
                        <input name="grid_type" class="text" value="pagination" type="radio">&nbsp;Paging&nbsp;
                        <input name="grid_type" class="text" value="scrolling_div" type="radio">&nbsp;Scrolling Table&nbsp;
                     </td>
                  </tr>

                  <tr>
                     <td>Tags:</td>
                     <td>
                        <input name="tag_type" class="text" value="short_tags" type="radio" checked='checked'>&nbsp;Short&nbsp;
                        <input name="tag_type" class="text" value="long_tags" type="radio">&nbsp;Long&nbsp;
                     </td>
                  </tr>

                  <tr>
                     <td colspan="2" style="margin: 0pt; padding: 0pt; background-color: rgb(221, 221, 187);"><p style="font-size: 1px;">&nbsp;</p></td>
                  </tr>
               </tbody></table>

            </div>



            <div id="myTabGroup" class="TabStyleContainer"></div>


<script type="text/javascript">
tabs = new TabGroup('myTabGroup');
tabs.add('mytab1', 'Database');
tabs.add('mytab2', 'General');
tabs.add('mytab3', 'Code Options');
tabs.draw();
tabs.focus('mytab1');

// Special functions to drive additions to demo
// By Dov Katz
function makeDynamicTab(tabg){
   var id=prompt("Please enter an ID","tab_"+new Date().getTime());
   if (!id) return;
   var title=prompt("Please select a title","");
   if(id && title && id.length >0 && title.length>0) { tabs.addEx(id,title);}
}
function renameActiveTab(tabg){
   var id=tabg.aid;
   if (!id || ! document.getElementById(id)) return;
   var title=prompt("Please select a title","");
   if(id && title && id.length >0 && title.length>0) { tabs.setTitle(id,title);}
}
function setTabForeground(tabg){
   var id=tabg.aid;
   if (!id || ! document.getElementById(id)) return;
   var c=prompt("Select Color","red");
   if(id && c && c.length >0 && id.length >0) { tabs.setTabForeground(id,c);}
}
</script>

         </div>
         <input name="generate" value="Go ahead. Make my code" type="submit" class='redbutton'>
         <br>

      </div>

<!-- END NAVIGATION -->

      <div id="extra">
         Output:
         <div class="panel" style='height:190px;' id='output'>
         </div>
      </div>
      <div id="footer">
               </div>
   </div>
      </form>
</body>
</html>